<template>
	<div name="show">
		<ul class="goodList">
			<li v-for="goods in list">
				<img v-bind:src="goods.img">
				<p>{{ goods.goodName}}</p>
			</li>
		</ul>
	</div>
</template>

<script type="text/javascript">

export default {
	name:"show",
	data(){
		var _this=this;
		var url="";
		if(_this.goodId==1){
			url="json/bjb.json";
		} else if(_this.goodId==2){
			url="json/mobile.json";
		} else {
			url="json/bjb.json";	
		}
		this.$http.get(url).then(function(res){
			_this.list=res.data;
		})
		return{
			list:[]
		}
	},
	props:{
		goodId:Number
	},
	watch:{
		goodId(){
			var _this=this;
			var url="";
			if(_this.goodId==1){
				url="json/bjb.json";
			} else if(_this.goodId==2){
				url="json/mobile.json";
			} 
			this.$http.get(url).then(function(res){
			_this.list=res.data;
		})
		return{
			list:[]
		}
		}
	}
}
</script>

<style type="text/css">
.goodList li {
	width: 200px;
	height: 600px;
	list-style: none;
	float:left;
	font-size: 10px;
	color: red;
	margin-bottom: 30px;
}
.goodList img {
	width: 180px;
	height: 580px;
}
</style>